import React from 'react'
import './index.less'
import { Card, Row, Col, Carousel } from "antd"

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation } from 'swiper';
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/components/navigation/navigation.min.css"


SwiperCore.use([Navigation])









export default class Cluture extends React.Component {
    state = {
        page: 0,
    }



    render() {
        return (
            <div >

                <Carousel autoplay>
                    <div>
                        <div className="cutitle">
                            大数据 人工智能 云计算
                        </div>
                        <div className="cudetail">
                            为企业与求职者提供一站式灵活用工服务平台
                        </div>
                        <img className='img-responsive' src="https://z3.ax1x.com/2021/07/19/WGxYNR.png" />
                    </div>

                    {/* <div>
                        <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>4</h3>
                    </div> */}
                </Carousel>
                <div style={{ padding: '70px' }}>
                    <p style={{ fontSize: 36, textAlign: 'center' }}>企业简介</p>
                    <div style={{ margin: '0 auto', padding: '20px 40px', textAlign: 'left', maxWidth: 1300 }}>
                        <div style={{ padding: "50px auto" }}>
                            <p style={{ lineHeight: "32px", fontSize: 18 }}>
                                郑州享帮帮信息科技有限公司成立于2018年12月，致力于灵活用工领域，用科技链接企业及劳动者，推动灵活用工行业的发展。基于多年人力资源领域的经验，是国内较早灵活用工领域的践行者。
                            </p>
                            <p style={{ lineHeight: "32px", fontSize: 18 }}>

                                公司旗下的“响帮帮灵活用工”平台，以大数据、人工智能、云计算等为技术基础，专为企业与灵活就业者提供一站式服务，在平台上完成岗位匹配、上岗、定位打卡、工资结算及双方评价等服务，大大提高了企业与灵活就业者之间的效率与信任度，助力企业提升运营效率、降低人工成本，提高灵活就业者的劳动报酬。
                            </p>
                            <p style={{ lineHeight: "32px", fontSize: 18 }}>

                                享帮帮科技立足新经济，不断探索灵活就业新模式，为企业提供灵活用工整体解决方案。为国家稳就业、保民生做出贡献，践行社会责任，助力企业与个人创造最大价值。
                            </p>
                        </div>
                    </div>

                </div>
                <div>
                    <img className='img-responsive' src="https://z3.ax1x.com/2021/07/13/WkYwJ1.png" />
                </div>
                <div style={{ padding: '70px', backgroundColor: '#ffffff' }}>
                    <p style={{ fontSize: 36, textAlign: 'center' }}>企业文化</p>
                    <Row justify="center" gutter={[24, 24]}>
                        <Col span={9}>
                            <Card
                                className="mycard"
                            >
                                <div className="myfont">
                                    <p style={{ fontWeight: 300, fontSize: 24 }}>使命</p>
                                    <span>———</span>
                                    <p>
                                        打造诚信、高效、专业的 <br />
                                        一站式灵活用工平台
                                    </p>
                                </div>

                            </Card>
                        </Col>
                        <Col span={9}>
                            <Card
                                className="mycard"
                            >
                                <div className="myfont">
                                    <p style={{ fontWeight: 300, fontSize: 24 }}>核心价值观</p>
                                    <span>———</span>

                                    <p >
                                        用户第一、值得信赖 <br />
                                        创新协作、拼搏进取
                                    </p>
                                </div>

                            </Card>
                        </Col>
                        <Col span={9}>
                            <Card
                                className="mycard"
                            >
                                <div className="myfont">
                                    <p style={{ fontWeight: 300, fontSize: 24 }}>理念</p>
                                    <span>———</span>
                                    <p>
                                        创新 / 赋能 <br />
                                        共享 / 共赢
                                    </p>
                                </div>

                            </Card>
                        </Col>
                        <Col span={9}>
                            <Card
                                className="mycard"
                            >
                                <div className="myfont">
                                    <p style={{ fontWeight: 300, fontSize: 24 }}>口号</p>
                                    <span>———</span>
                                    <p>
                                        互帮共享   成就梦想     <br />
                                        响帮帮  帮天下
                                    </p>
                                </div>

                            </Card>
                        </Col>
                    </Row>
                </div>
                <div style={{ margin: '0 auto', padding: '0px 150px 118px 150px', maxWidth: 1300 }}>
                    <p style={{ fontSize: 36, textAlign: 'center', paddingBottom: 20 }}>发展历程</p>
                    <div className="swiperfather">
                        <Swiper
                            slidesPerView={2}
                            navigation={{
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                                disabledClass: 'disable'
                            }}
                            className="swiper-container"
                        >
                            <SwiperSlide className="swiper-slide">
                                <div>
                                    <ul class="time-horizontal" >
                                        <li><p className='date'>06-15</p><b></b>
                                            <p className="timedetail">
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                        <li>
                                            <p className='date-bottom'>05-15</p><top></top>
                                            <p className="timedetail-top" >
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide  className="swiper-slide" >
                                <div  >
                                    <ul class="time-horizontal" >
                                        <li ><time ></time>
                                            <p className="year">2020</p>
                                        </li>

                                        <li ><p className='date'>09-01</p><b></b>
                                            <p className="timedetail">
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="swiper-slide">
                                <div >
                                    <ul class="time-horizontal">
                                        <li><p className='date'>06-15</p><b></b>
                                            <p className="timedetail">
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                        <li>
                                            <p className='date-bottom'>05-15</p><top></top>
                                            <p className="timedetail-top" >
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="swiper-slide">
                                <div >
                                    <ul class="time-horizontal">
                                        <li><time ></time>
                                            <p className="year">2019</p>
                                        </li>

                                        <li><p className='date'>09-01</p><b></b>
                                            <p className="timedetail">
                                                享帮帮灵活用工小程序用户端完成上线，开始运营。享帮帮灵活用工小程序用户端完成上线，开始运营。
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </SwiperSlide>
                        </Swiper>
                        <div className="swiper-button-prev"></div>
                        <div className="swiper-button-next"></div>
                    </div>
                </div>
            </div >
        )
    }
}